<template>
  <div class="home">
    <div>
      价格：<input type="text" v-model="price" />名称：<input
        type="text"
        v-model="title"
      />
      <button @click="submit">提交</button>
    </div>
    <table border="1" class="content">
      <tr>
        <th>id</th>
        <th>书名</th>
        <th>价格</th>
        <th>操作</th>
      </tr>

      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="remove(index)">删除</button
          ><button @click="handlerEdit(item, index)">编辑</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props) {
    const price = ref("");
    //价格
    const title = ref("");
    //标题
    const isEdit = ref(false);
    //现在是不是编辑状态  一个变量的true和false代表了编辑和添加的两种状态
    const editIndex = ref(-1);
    //保存要编辑的数据的下标 是为了知道现在在编辑哪条数据 为什么是-1 就是一开始谁都不编辑
    const data = reactive({
      list: [
        { title: "vuejs从入门到秃头", id: 0, price: 100 },
        { title: "vuejs从入门到放弃", id: 1, price: 200 },
        { title: "vuejs从入门到大神", id: 2, price: 300 },
      ],
    });
    //数据

    const submit = () => {
      if (isEdit.value == false) {
        data.list.push({
          price: price.value,
          title: title.value,
          id: new Date().getTime(),
          // 时间戳 是1970年到现在的毫秒数肯定是唯一的可以用作id
        });

        //如果不是编辑状态就往里添加
      } else {
        //  这里执行编辑
        data.list[editIndex.value].price = price.value;
        data.list[editIndex.value].title = title.value;
        //执行编辑效果 根据保存的下标 修改数据
        isEdit.value = false;
        // 编辑完成之后 编辑状态是false 就变成添加额的状态了
      }

      price.value = "";
      title.value = "";
      //不管是编辑还是添加 执行结束之后 都清空input
    };
    //点击提交按钮的时候

    const remove = (index) => {
      data.list.splice(index, 1);
    };

    const handlerEdit = (item, index) => {
      isEdit.value = true;
      price.value = item.price;
      title.value = item.title;
      //状态变成编辑 并且数据回填
      editIndex.value = index;
      // 保存编辑的数据的下标
    };
    //点击编辑按钮触发的事件
    return {
      ...toRefs(data),
      submit,
      price,
      title,
      remove,
      handlerEdit,
      editIndex,
    };
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 800px;
  margin: 30px auto;
}
</style>
